<template>
    <div>
        <div class="box">
            <el-col :span="15">
                <el-input type="text" placeholder="请输入员工工号作为检索关键字" v-model="keyword" maxlength="10"
                          show-word-limit></el-input>
            </el-col>
            <el-button type="primary" round @click="research">查找</el-button>
        </div>
        <el-table
                :data="tableData_StationChange"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="变动原因" label-width="200px">
                            <span>{{ props.row.reason }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    prop="workNumber"
                    label="员工工号">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="员工姓名">
            </el-table-column>
            <el-table-column
                    prop="changeType"
                    label="变动类型">
            </el-table-column>

            <el-table-column
                    prop="occurTime"
                    label="调动时间">
            </el-table-column>
            <el-table-column
                    prop="originStation"
                    label="原职位">
            </el-table-column>
            <el-table-column
                    prop="desStation"
                    label="调动职位">
            </el-table-column>
        </el-table>
    </div>


</template>

<script>
    export default {
        data() {
            return {
                tableData_StationChange: [],
                keyword: ''
            }
        },
        methods: {
            //先校验是否为10位的数
            //关键字查询
            research() {
                if (this.keyword.length !== 10){
                    this.$message.error('输入工号不满足10位')
                    this.keyword = ''
                }
                else {
                    let data = {"token": this.$store.state.token, "workNumber": this.keyword}
                    this.$http.post('/getStationChangeInfo', data).then (res => {
                        this.tableData_StationChange = res.data.data
                    })
                }
            },
            fetch() {
                let data = {"token": this.$store.state.token, "workNumber": null}
                this.$http.post('/getStationChangeInfo', data).then(res => {
                    // console.log(res.data)
                    this.tableData_StationChange = res.data.data
                })

            }
        },
        created() {
            this.fetch()
        }
    }
</script>

<style scoped>
    .box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
</style>
